<template>
	<div class="letter">
		<div class="item" v-for="(v,key) of cities" :key="key" @click="handleKeyClick(key)">{{key}}</div>
	</div>
</template>
<script>
	export default{
		name:"CityLetter",
		props:{
			cities:Object
		},
		methods:{
			handleKeyClick(key){
				this.$emit("getKey",key)
			}
		}
	}
</script>
<style lang="less" scoped>
	@import "~less/common/base.less";
	.letter{
		position: fixed;
		width: .38rem;
		right: 0;
		top:1.7rem;
		bottom:0;
		display: flex;
		justify-content: center;
		flex-direction: column;
		text-align: center;
		.item{
			padding:.04rem;
			color:@bgColor;
		}
	}
</style>